<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="text/javascript" src="../jquery/jquery-2.0.1.min.js"></script>
		<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
		<script type="text/javascript" src="../arel/arel.js"></script>
		<script type="text/javascript" src="Assets7/arelGlue7.js"></script>
		<link rel="stylesheet" type="text/css" href="../jquery/jquery-ui.css"  />
		<link rel="stylesheet" type="text/css" href="../tutorials.css">

		<style type="text/css">
			#radio
			{
				position: absolute;
				display: inline;
				bottom: 0.3cm;
				right: 0.4cm
			}

			.Button {
				-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
				box-shadow:inset 0px 1px 0px 0px #ffffff;
				background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
				background-color:#ededed;
				-webkit-border-radius:6px;
				border-radius:6px;
				border:1px solid #dcdcdc;
				display:inline-block;
				color:#777777;
				text-decoration:none;
				text-shadow:1px 1px 0px #ffffff;
			}
			/* This imageless css button was generated by CSSButtonGenerator.com */
		</style>

		<script type="text/javascript">
			$(function() {
				$("#radio").buttonset();
				// Delegate selection change to clickHandler in arelGlue2.js
				$("#radio input").bind("click", function() { clickHandler(); });
			});
		</script>

		<title>Tutorial 7</title>
	</head>
	<body>
		<form>
			<div id="radio">
				<input type="radio" id="radio1" name="radio" /><label for="radio1" style="font-size: small">Take Picture</label>
				<input type="radio" id="radio2" name="radio" /><label for="radio2" style="font-size: small">Reset</label>
			</div>
		</form>

		<div id="Button">
			<div>
				<a href="#" class="Button" id="button3" onclick="javascript:onTVPushed()"><img id="tvImage" src="Assets7/button_tv_unselected.png" style="height: 72px; width: 72px" /></a>
			</div>
			<div>
				<a href="#" class="Button" id="button2" onclick="javascript:onChairPushed()"><img id="chairImage" src="Assets7/button_chair_unselected.png" style="height: 72px; width: 72px" /></a>
			</div>
			<div>
				<a href="#" class="Button" id="button1" onclick="javascript:onManPushed()"><img id="manImage" src="Assets7/button_man_unselected.png" style="height: 72px; width: 72px" /></a>
			</div>
		</div>
	</body>
</html>